/**

  [ sunblind ]

  A blindingly sunny theme for Reveal.js with Lora + Leto fonts and a colorful border.
  By Josh Dzielak, https://dzello.com/, License MIT

  The bold border is optional and requires some HTML. To use it:

  1. Add 4 divs to your HTML page:
    <div class="line top"></div>
    <div class="line bottom"></div>
    <div class="line left"></div>
    <div class="line right"></div>

  2. Set { margin: 0.2 } in the Reveal.js initializer to make sure
  your presentation content doesn't collide with the frame.

  Like the theme but don't like the colors? Don't fret. Just change
  $borderColor and/or $linkColor below to something else and rebuild.

  Or if you don't want to rebuild the theme just override the .line background
  property with some CSS:

  .line {
    background: <new-color>;
  }

*/

// Default mixins and settings -----------------
@import "../template/mixins";
@import "../template/settings";
// ---------------------------------------------


// Include theme-specific fonts
@import url(https://fonts.googleapis.com/css?family=Lato:300,700);
@import url(https://fonts.googleapis.com/css?family=Lora:700);

// store colors in variables
$hotPink: #FF4081;
$sunshine: #f6f195;
// the color of the thick border surrounding the presention
$borderColor: $sunshine;

// Override theme settings (see ../template/settings.scss)
$backgroundColor: #fff;

$mainColor: #363636;
$headingColor: #141414;

$mainFontSize: 32px;
$mainFont: 'Lato', serif;
$headingFont: 'Lora', sans-serif;
$headingTextShadow: none;
$headingLetterSpacing: normal;
$headingTextTransform: uppercase;
$headingFontWeight: 700;
$linkColor: $hotPink;
$linkColorHover: lighten( $linkColor, 15% );
$selectionBackgroundColor: lighten( $linkColor, 25% );

$heading1Size: 2.0em;
$heading2Size: 1.8em;
$heading3Size: 1.4em;
$heading4Size: 1.2em;

section.has-light-background {
  &, h1, h2, h3, h4, h5, h6 {
    color: #141414;
  }
}

.reveal .controls {
  right: 50px;
  bottom: 50px;
}

.line {
  content: '';
  position: fixed;
  background: $borderColor;
  z-index: 105;
  &.top {
    left: 0;
    top: 0;
    width: 100%;
    height: 30px;
    @media (max-width: 840px) {
      height: 15px;
    }
  }
  &.bottom {
    left: 0;
    top: auto;
    bottom: 0;
    width: 100%;
    height: 30px;
    @media (max-width: 840px) {
      height: 15px;
    }
  }
  &.left {
    left: 0;
    top: 0;
    width: 30px;
    height: 200%;
    @media (max-width: 840px) {
      width: 15px;
    }
  }
  &.right {
    left: auto;
    right: 0;
    top: 0;
    width: 30px;
    height: 200%;
    @media (max-width: 840px) {
      width: 15px;
    }
  }
}

// don't show the colored frame against dark backgrounds
.reveal.has-dark-background {
  .line {
    display: none;
  }
}

// Theme template ------------------------------
@import "../template/theme";
// ---------------------------------------------

.reveal .progress {
  z-index: 1000;
  color: darken($sunshine, 25%);
}
